<!DOCTYPE html>
<html lang="en" style="margin: 13px;border: 12px solid black;padding: 11px;">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../bootstrap/js/jquery-3.1.0.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#elem").click(function(e){
                alert(e.clientY + window.pageYOffset - document.documentElement.clientTop - $(this).offset().top);
            });

            $(window).mousemove(function(e){
                $("p").html(e.clientX + "," + e.clientY);
            });
        })
    </script>
</head>
<body style="margin: 10px;border: 9px solid black;padding: 8px;height:2000px">
    <div id="elem" style="width: 200px;height: 200px;margin: 7px;border:6px solid black;padding: 5px;background-color: green;overflow: scroll">
        <div id="elem1" style="width: 400px;height: 400px;background-color: red;"></div>
    </div>

    <div>
        <script type="text/javascript">

        </script>
    </div>

<p></p>
</body>
</html>